<template>
    <div>
        <template v-if="enablePreview">
            <el-image :preview-src-list="[cache]"
                      :src="cache"
                      :style="{height: size + 'px', width: size + 'px'}"
                      class="avatar"
                      fit="cover">
            </el-image>
        </template>
        <template v-else>
            <el-image :src="cache"
                      :style="{height: size + 'px', width: size + 'px'}"
                      class="avatar"
                      fit="cover">
            </el-image>
        </template>
    </div>
</template>
<script lang="ts">
  import {Component, Model, Prop, Vue, Watch} from 'vue-property-decorator';

  @Component
  export default class UserAvatar extends Vue {
    @Model()
    @Prop()
    public value!: string;
    @Prop({
      default: 50
    })
    public size!: number;
    @Prop({
      default: true
    })
    public enablePreview!: boolean;

    public cache: string = '';

    public created() {
      this.change();
    }

    @Watch('value')
    public change() {
      if (!this.value) {
        this.cache = this.$getImageUrl(process.env.VUE_APP_DEFAULT_AVATAR_URL);
      } else {
        this.cache = this.$getImageUrl(this.value);
      }
    }
  }
</script>
<style>
    .avatar {
        border-radius: 50%;
        vertical-align: middle;
        display: inline-block;
        background-position: center;
        background-size: cover;
    }
</style>
